<template>
  <div class="webchatConfig">
    <el-form class="m7-form webchatConfigForm"
      size="mini" :model="webchatConfigForm" label-position="top">
      <el-form-item label="座席昵称" prop="agentName">
        <el-input v-model="webchatConfigForm.agentName" size="mini" placeholder="请输入">
        </el-input>
      </el-form-item>
      <el-form-item label="会话上限（最小）" prop="minLimit">
        <m7Select
          size="mini"
          filterable
          :options="minNumber"
          :defaultProps="{value: 'value', label: 'label'}"
          v-model="webchatConfigForm.minLimit"
          @change="minChange"
          placeholder="请选择">
        </m7Select>
      </el-form-item>
      <el-form-item label="会话上限（最大）" prop="maxLimit">
        <m7Select
          size="mini"
          filterable
          :options="maxNumber"
          :defaultProps="{value: 'value', label: 'label'}"
          v-model="webchatConfigForm.maxLimit"
          placeholder="请选择">
        </m7Select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({
  name: 'webchatConfig'
})
export default class WebchatConfig extends Vue {
  public webchatConfigForm: any = { // 在线客服配置表单
    agentName: '', // 座席昵称
    minLimit: 1, // 最小会话上线
    maxLimit: 10 // 最大会话上线
  }

  // private webchatConfigRules = {
  //   agentName: [{ required: true, trigger: 'blur', message: '请输入座席昵称' }]
  // }

  private sessionLimitLength = 200

  private maxNumber: any = []

  private minNumber = []

  // 循环座席能同时接待会话数
  private forNumber (num, obj, targetNum) {
    for (let i = targetNum; i < num + 1; i++) {
      obj.push({
        label: i,
        value: i
      })
    }
    return obj
  }

  private minChange () {
    this.maxNumber = this.forNumber(200, [], this.webchatConfigForm.minLimit)
  }

  public setWebchatConfigData (obj?: any) {
    if (obj && obj.webchatConfig) {
      const { agentName, minLimit, maxLimit } = obj.webchatConfig
      this.webchatConfigForm = { agentName, minLimit, maxLimit }
    } else {
      this.webchatConfigForm = {
        agentName: '',
        minLimit: 1,
        maxLimit: 10
      }
    }
  }

  private mounted () {
    this.forNumber(200, this.maxNumber, 1)
    this.forNumber(200, this.minNumber, 1)
  }
}
</script>
<style lang="stylus" scoped>
</style>
